Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…apse - Add maxVisible prop to UserFilters for badge overflow into "More" popover - Merge UserFilters row into toolbar (left: badges, right: tool buttons) - Change Search from inline input to icon button + Popover - Remove separate UserFilters row from ListView - Add 6 new UserFilters collapse behavior tests - Add 3 new merged toolbar layout tests - Update 7 existing search-related tests for new icon+popover pattern - All 148 tests pass (33 UserFilters + 115 ListView) Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
… condition Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Optimize ListView toolbar for filters and sorting
Merge ListView filter/toolbar rows into single Airtable-style toolbar with badge overflow
Feb 27, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the ListView toolbar to match Airtable Interfaces density by merging the UserFilters badges row with the tool buttons row into a single consolidated toolbar. The change improves space efficiency and introduces overflow handling for filter badges.
Changes:
- UserFilters badges now render inline at the left of the toolbar row with tool buttons at the right
- Search changed from inline input to icon button + Popover pattern, saving horizontal space
- New
maxVisibleprop on UserFilters collapses overflow badges into a "More" button with count indicator (dropdown mode only)
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/plugin-list/src/tests/UserFilters.test.tsx | Added 6 new tests for maxVisible collapse behavior (overflow, edge cases, mode-specific handling) |
| packages/plugin-list/src/tests/ListView.test.tsx | Updated 7 search tests for icon+popover pattern; added 3 new tests for merged toolbar layout and search icon highlighting |
| packages/plugin-list/src/UserFilters.tsx | Implemented maxVisible prop with overflow handling; extracted renderBadge function for reuse in visible list and "More" popover |
| packages/plugin-list/src/ListView.tsx | Merged UserFilters into toolbar row (left side); converted search to icon button + Popover; removed standalone UserFilters row; added separator between filter badges and tool buttons |
| ROADMAP.md | Updated to document merged toolbar, maxVisible overflow, and test count |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ListView had UserFilters badges and tool buttons on separate rows. This merges them into one row (badges left, tools right) matching Airtable Interfaces toolbar density, with automatic badge collapsing when filters exceed available space.
UserFilters:
maxVisibleoverflowmaxVisibleprop onUserFilters— badges beyond the limit collapse into a "More" popover with count indicatordropdownmode;tabs/togglemodes unaffectedListView toolbar merge
maxVisible={3}user-filtersrow entirely<Input>to icon button +<Popover>— icon highlights when a term is activeTests
search-icon-button→ open popover → interact with input)maxVisiblecollapse behavior (split, overflow popover, edge cases)Original prompt
🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.